<!DOCTYPE html>
<html>
<head>
    <title>留言板管理</title>
    <include file='static/head.html'>
</head>
<body>

<!-- layui-tab开始 -->
<div class="layui-tab " lay-filter="demo-tab" class="js-check-wrap" id="app" v-cloak>
    <!-- 顶部导航菜单开始 -->
    <div class="layui-tab-nav" >
        <ul class="layui-tab-title">
            {:getNav('message_board','admin_index/index')};
        </ul>
    </div>
    <!-- 顶部导航菜单结束 -->

    <!-- 搜索菜单开始 -->
    <div class="layui-form table-bar" lay-filter="form-bar" method="post" id="search">
        
        <fieldset class="layui-elem-field layui-field-title layui-field-padding">
            <legend class="layui-legend-size">搜索</legend>
            <div class="layui-form-search-item">
                <el-input v-model="searchForm.title" placeholder="请输入标题名称" size="small" style="width: 180px;" clearable></el-input>
                <el-input v-model="searchForm.user_name" placeholder="请输入用户名称" size="small" style="width: 180px;" clearable></el-input>

                <el-date-picker
                  size="small"
                  v-model="searchForm.create_time"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>

                <el-select size="small" v-model="searchForm.option" clearable placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>

                <button type="submit" class="layui-btn layui-btn-sm layui-btn-primary" style="font-weight:800;" @click="init"><i class="layui-icon ">&#xe615;</i>搜索</button>
            </div>
        </fieldset>
    </div>
    <!-- 搜索菜单结束 -->

    <!-- 表格内容开始 -->
    <div class="layui-card">
        <div class="layui-card-header layui-bg-gray layui-bottom" id="piliang">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addShow = true">添加</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deletedArr">批量删除</el-button>
        </div>
        <div class="layui-card-body layui-nopadding " >

            <el-table
                    :data="tableData"
                    stripe
                    border
                    v-loading="loading"
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="留言标题">
                </el-table-column>
                <el-table-column
                        prop="user_login"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="create_time" 
                        label="添加时间">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-info" size="small" @click="openDetail(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="layui-table-page">
                <div id="layui-table-page1">
                    <el-pagination
                            background
                            :page-size="10"
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :total="pageTotal">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
    <!-- 表格内容结束 -->

    <!-- 添加弹框开始 -->
    <el-dialog
      title="新建留言"
      :visible.sync="addShow"
      width="30%"
      :before-close="handleClose">

        <el-form ref="form" :model="addForm" label-width="80px">
            <el-form-item label="标题：">
                <el-input v-model="addForm.title"></el-input>
            </el-form-item>

            <el-form-item label="内容：">
                <el-input type="textarea" v-model="addForm.content"></el-input>
            </el-form-item>
        </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addMessage()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加弹框结束 -->

    <!-- 详情弹框开始 -->
    <el-dialog
      title="留言详情"
      :visible.sync="detailShow"
      width="30%"
      >

        <el-form ref="form" :model="addForm" label-width="100px">
            <el-form-item label="标题：">
                {{detailForm.title}}
            </el-form-item>
            <el-form-item label="添加人：">
                {{detailForm.user_login}}
            </el-form-item>
            <el-form-item label="添加时间：">
                {{detailForm.create_time}}
            </el-form-item>
            <el-form-item label="内容：">
                {{detailForm.content}}
            </el-form-item>
        </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="detailShow = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 详情弹框结束 -->

</div>

<include file='static/scripts.html'>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            addShow:false,  //添加窗口打开状态
            addForm:{},     //添加数组
            detailShow:false,   //详情窗口打开状态
            detailForm:{},  //详情数组
            tableData: [],  //列表数据
            pageTotal:0,
            loading: false, //加载状态
            multipleSelection: [],  //选择的列表
            //搜索数组
            searchForm:{
                'page':1,
                'pagesize':10,
                'title':'',
                'user_name':'',
                'create_time':''
            },
            options:[
                {value:'示例1',label:'示例1'},
                {value:'示例2',label:'示例2'},
                {value:'示例3',label:'示例3'},
                {value:'示例4',label:'示例4'},
                {value:'示例5',label:'示例5'},
            ]
        },
        //初始方法
        created: function () {
            this.init();
        },
        methods: {
            init: function(){
                this.getAllList();
            },
            //获取列表
            getAllList(){
                let that = this
                that.loading = true
                let url = "{:cmf_plugin_url('MessageBoard://admin_index/getList')}";
                $.ajax({
                    url:url,
                    data:that.searchForm,
                    type:'post',
                    success:function(res){
                        if(res.code == 200){
                            that.tableData = res.data.data
                            that.pageTotal = res.data.total
                        }
                        that.loading = false
                    },
                    error:function(){
                        that.$message.error('系统错误');
                        that.loading = false
                    }
                })
            },
            //添加操作
            addMessage(){
                let that = this
                that.loading = true
                let url = "{:cmf_plugin_url('MessageBoard://admin_index/addMessage')}";
                $.ajax({
                    url:url,
                    data:that.addForm,
                    type:'post',
                    success:function(res){
                        if(res.code == 200){
                            that.addShow = false;
                            that.addForm = {};  //清空输入
                            that.getAllList();
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.message
                            });                              
                        }
                        that.loading = false
                    },
                    error:function(){
                        that.$message.error('添加失败请重试');
                        that.loading = false
                    }
                })
            },
            //多选操作
            handleSelectionChange(val) {
                let ids = [];
                for (const item of val) {
                    ids.push(item.id);
                }
                this.multipleSelection = ids;
            },
            //页码选择
            handleCurrentChange(val) {
                this.searchForm.page = val;
                this.getAllList();
            },
            //打开详情页面
            openDetail(id){
                let that = this
                let url = "{:cmf_plugin_url('MessageBoard://admin_index/detailMessage')}";
                $.ajax({
                    url:url,
                    data:{id:id},
                    type:'post',
                    success:function(res){
                        if(res.code == 200){
                            that.detailForm = res.data;
                            that.detailShow = true;
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.message
                            });                              
                        }
                    },
                    error:function(){
                        that.$message.error('系统错误');
                    }
                })                
            },
            //删除
            deletedArr(){
                let ids = this.multipleSelection.toString();
                let that = this
                that.$confirm('此操作将永久删除留言, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = "{:cmf_plugin_url('MessageBoard://admin_index/delMessage')}";
                    $.ajax({
                        url: url,
                        data: {
                            id:ids
                        },
                        type: 'post',
                        success: function (res) {
                            if (res.code == 200) {
                                that.$message({
                                    type: 'success',
                                    message: res.message
                                });
                                that.getAllList();
                            }else{
                                that.$message({
                                    type: 'error',
                                    message: res.message
                                });  
                            }
                        },
                        error: function () {
                            that.$message.error('系统错误');
                        }
                    })
                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //关闭弹窗
            handleClose(done) {
                this.$confirm('确认关闭？')
                  .then(_ => {
                    done();
                  })
                  .catch(_ => {});
            }
        }
    })
</script>
</body>
</html>